<template>
  <page-card title="公告管理"
             sub-title="详情"
             :need-back="true">
    <div style="display:flex; justify-content: center;">
      <div style="width:60%;">
        <div>
          <h1 class="titlecss">{{ data.title }}</h1>
        </div>
        <div style="color:#AAAAAA;font-size:calc(var(--font-size-20) + 1px);">
          {{ data.author }}
        </div>
        <div style="margin-bottom:41px;color:#AAAAAA;font-size:12px;">
          发布时间：{{ createTime }}
        </div>
        <div class="centercss">
          <img v-if="data.img"
               style="max-height: 600px;"
               slot="cover"
               alt="example"
               :src="data.img" />
        </div>
        <div v-html="data.content" />
        <div>
          <z-file-uploader :isQuery="fileUpload.isQuery"
                           :showUploadList="fileUpload.showUploadList"
                           :parentId="$route.query.id"
                           :bucketName="fileUpload.bucketName"
                           :systemName="fileUpload.systemName"
                           :limit="fileUpload.limit"
                           :prop="fileUpload.fileList"
                           :configGroup="fileUpload.configGroup"
                           ref="fileUploader"
                           v-model="fileUpload.fileList" />

        </div>
      </div>
    </div>

  </page-card>
</template>

<script>
import { getById } from '../../api/announcement/index'
// import { FileUploader } from 'zenith-vue-components'

export default {
  components: {
    // FileUploader
  },
  data () {
    return {
      createTime: '',
      data: {},
      fileUpload: {
        limit: 99,
        parentId: this.$route.query.id,
        fileList: [], // 图片列表集合
        isQuery: true, // 当此参数为true时表示其功能不可上传图片
        showUploadList: true, // 是否显示图片列表
        bucketName: 'zongheng-system', // 当前归属系统所在的空间名称
        systemName: 'zongheng-system', // 归属系统名称
        configGroup: 'zongheng-file-announcement'
      }
    }
  },
  mounted () {
    const id = this.$route.query.id
    if (id) {
      this.getById(id)
    }
  },
  methods: {
    getById (id) {
      getById(id).then((response) => {
        this.data = response
        this.createTime = this.data.createTime.substring(5, 16)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.titlecss {
  font-size: 40px;
  line-height: 58px;
  padding-top: 11px;
  padding-bottom: 0px;
  text-align: justify;
  font-weight: 700;
}
.centercss {
  text-align: center;
  margin-bottom: 40px;
}
</style>
